<template>
  <el-card>
      <!-- 机构账户管理 -->
      <bread-crumb slot="header">
        <template slot="title">机构账户管理</template>
      </bread-crumb>
      <div class="bigBox">
        <div class="queryssss">
            <el-input v-model="servicesName" placeholder="请输入机构名称" />
            <el-button @click="getServicesUser(servicesName)" style="margin-left: 20px;" type="primary">查询</el-button>
        </div>
        <div>
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
            <el-table-column prop="servicesName" label="机构名称" width="410%"></el-table-column>
            <el-table-column prop="license" label="办学许可证号" width="340%"></el-table-column>
            <el-table-column prop="account" label="机构账号" width="280%"></el-table-column>
            <el-table-column label="操作" width="230%">
                    <template slot-scope="{row}">
                      <el-button
                        @click="getUserInfo('修改账户', row.id)"
                        type="text"
                        size="small">
                        修改账号
                      </el-button>
                      <el-button
                      exportBouncedsssss = true
                        @click="getUserInfo('修改密码', row.id)"
                        type="text"
                        size="small">
                        重置密码
                      </el-button>
                    </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
            <el-row
              type="flex"
              align="middle"
              justify="end"
              style="margin-top: 20px"
            >
              <el-col :span="8">
                <el-pagination
                  background
                  layout="total, prev, pager, next, sizes"
                  :total="page.total"
                  :page-sizes="[7, 10, 20, 50, 100]"
                  :page-size="page.pageSize"
                  @current-change="changePage"
                  @size-change="handleSizeChange"
                  :current-page.sync="page.currentPage"
                ></el-pagination>
              </el-col>
            </el-row>
        </div>
      </div>
      <!-- 修改账户 -->
      <el-dialog title="修改账户" width="600px" :visible.sync="exportBounced">
        <el-form :model="formLabelAlign" ref="ruleForm" :rules="rules">
          <el-form-item label="机构账户" label-width="100px" prop="account">
            <el-input
            type="password"
            style="width: 350px;"
              v-model="formLabelAlign.account"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="exportBounced = false">取 消</el-button>
          <el-button type="primary" @click="editUser(types, userId)">提 交</el-button>
        </span>
      </el-dialog>
      <!-- 重置密码 -->
      <el-dialog title="重置密码" width="600px" :visible.sync="exportBouncedsssss">
        <el-form :model="formLabelAlign" ref="ruleForm" :rules="rules">
          <el-form-item label="重置密码" label-width="100px" prop="account">
            <el-input
            type="password"
            style="width: 350px;"
              v-model="formLabelAlign.account"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="exportBouncedsssss = false">取 消</el-button>
          <el-button type="primary" @click="editUser(types, userId)">提 交</el-button>
        </span>
      </el-dialog>
  </el-card>
</template>

<script>
import { getServicesUser, editUser } from '@/api'
export default {
  data () {
    return {
      rules: {
        account: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, message: '密码必须是数字和字母组合长度不能小于8', trigger: 'change' }
        ]
      },
      formLabelAlign: {
        account: ''
      },
      exportBounced: false,
      exportBouncedsssss: false,
      servicesName: '',
      types: null,
      userId: null,
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [
        {
          licence: '杭州精锐培训学校有限公司高新大厦分公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州宏景优加培训学校有限公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州乐学培优培训学校有限公司第一分公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州乾进培训学校有限公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州乐学启扬培训学校有限公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州立德培训学校有限公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        },
        {
          licence: '杭州派加培训学校有限公司',
          Institutional: '133010670004059', // 1
          Organizers: '暂无' // 4
        }
      ]
    }
  },
  created () {
    this.getServicesUser()
  },
  methods: {
    // 获取用户信息
    getUserInfo (type, userId) {
      if (type === '修改账户') {
        this.exportBounced = true
      } else {
        this.exportBouncedsssss = true
      }
      this.types = type
      this.userId = userId
    },
    // 修改机构账户密码
    async editUser (type, userId) {
      let data = null
      const { account } = this.formLabelAlign
      switch (type) {
        case '修改账户':
          data = { account, userId }
          this.formLabelAlign.account = ''
          this.exportBounced = false
          break
        case '修改密码':
          data = { password: account, userId }
          this.formLabelAlign.account = ''
          this.exportBouncedsssss = false
          break

        default:
          break
      }
      const ser = await editUser(data)
      if (ser?.code === 200) {
        this.$message.success(ser?.msg)
        this.getServicesUser()
      }
    },
    // 机构账户列表
    async getServicesUser (servicesName) {
      const ser = await getServicesUser({ servicesName: servicesName })
      if (ser?.code === 200) {
        const { list, total } = ser.data
        this.tableData = list
        this.page.total = total
      }
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      console.log('我选择了')
      console.log(val)
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="less" scoped>

  .bigBox {
    padding: 20px;
  }

  .queryssss {
    width: 270px;
    display: flex;
    margin-bottom: 16px;
  }
</style>
